/**
 * @developer：MR·Feng
 * 登录
 */

import styles from '@/styles/login/login.less';

import React, { useEffect } from 'react';
import cookie from 'react-cookies';
import Request from '@/api/baseRequest.js';
import { Form, Input, Button } from 'antd';
import {
    UserOutlined,
    EyeInvisibleOutlined,
    EyeTwoTone,
    LockOutlined,
} from '@ant-design/icons';
import { withRouter } from 'umi';
import { AES } from '@/api/crypto';
import { layout, tailLayout } from '@/utils/datas';

function Login({ history }) {
    const [userform] = Form.useForm();

    // 表单提交成功
    const onFinish = (values) => {
        // values.userPwd = AES.Encrypt(values.userPwd); // 加密
        // values.userPwd = AES.Decrypt(values.userPwd); // 解密
        Request.getLogin(values)
            .then((res) => {
                if ([200, '200', 'OK'].includes(res.status)) {
                    cookie.save('userInfo', userform.getFieldValue());
                    history.push('/home');
                }
            })
            .catch((error) => {
                console.error(error);
            });
    };

    // 表单提交失败
    const onFinishFailed = (errorInfo) => console.error('Failed:', errorInfo);

    // 副作用操作
    useEffect(() => {
        userform.setFieldsValue({
            user: 'admin',
            passwd: 'Trops2021',
        });

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <article className={styles.mylogin}>
            <section className={styles.rightContainer}>
                <aside className={styles.loginFace}>
                    <h1>AK后台管理</h1>
                    <Form
                        form={userform}
                        {...layout(24)}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            name="user"
                            rules={[
                                { required: true, message: '请输入您的账号!' },
                            ]}
                        >
                            <Input
                                prefix={<UserOutlined />}
                                placeholder="账号"
                            />
                        </Form.Item>
                        <Form.Item
                            name="passwd"
                            rules={[
                                { required: true, message: '请输入您的密码!' },
                            ]}
                        >
                            <Input.Password
                                prefix={<LockOutlined />}
                                placeholder="密码"
                                iconRender={(visible) =>
                                    visible ? (
                                        <EyeTwoTone />
                                    ) : (
                                        <EyeInvisibleOutlined />
                                    )
                                }
                            />
                        </Form.Item>
                        <Form.Item {...tailLayout} className={styles.submit}>
                            <Button type="primary" htmlType="submit" block>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                    <p>使用账号密码登录</p>
                </aside>
            </section>
        </article>
    );
}

export default withRouter(Login);
